<template>
  <div class="app-container">
    <div class="table-container">
      <div class="left">
         <el-radio-group style="margin-bottom: 10px;" v-model="statistics_type" size="small" @change="change_statistics_type_value">
          <el-radio-button  border label="1">通话收入</el-radio-button>
          <el-radio-button  border label="2">月租收入</el-radio-button>
          <el-radio-button  border label="3">充值收入</el-radio-button>
        </el-radio-group>
      </div>
      <div class="right">
        <el-form :inline="true" :model="params">
           <el-form-item>
            <el-input style="width:240px;" v-model="params.msisdn" type="text" placeholder="请选择号码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList(val)">查询</el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="success" @click="searchSubmit">导出</el-button>
          </el-form-item> -->
        </el-form>
      </div>
    </div>
    <div class="_list">
      <el-table highlight-current-row @selection-change="handleSelectionChange" border :data="dataList" style="width: 100%" v-loading.body="listLoading">
        <el-table-column label="号码" width="200">
          <template slot-scope="scope">
            <div style="text-align:left;padding-left:10px;">{{scope.row.dialingPrefix?'(+'+scope.row.dialingPrefix+')':''}} {{scope.row.msisdn}} </div>
            <div style="text-align:left;padding-left:10px;">{{scope.row.countryName}}</div>
          </template>
        </el-table-column>
        <el-table-column label="月租成本">
          <template slot-scope="scope">
            {{scope.row.cost}}欧元/月
          </template>
        </el-table-column>
        <el-table-column label="月租价格">
          <template slot-scope="scope">
            {{scope.row.monthPrice}}欧元/月
          </template>
        </el-table-column>
        <el-table-column label="月租利润">
          <template slot-scope="scope">
            {{scope.row.profits}}欧元
          </template>
        </el-table-column>
        <el-table-column label="扣费时间">
          <template slot-scope="scope">
            {{scope.row.createdAt | formatDate}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <div class="right" v-if="total > 0">
        <el-pagination @current-change="handleCurrentChange" background :current-page.sync="page" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import mixinsTable from '@/utils/mixins.table';
export default {
  name: 'contcome',
  mixins: [mixinsTable],
  data() {
    return {
      search: {},
      statistics_type: '2',
      dateValue: '',
      servicePath: '/rental'
    };
  },
  created() {
    this.params.server = 'true';
    this.getList();
  },
  methods: {
    change_statistics_type_value(value) {
      this.$router.push({ path: value === '1' ? '/callincome' : value === '2' ? '/contcome' : '/topupinconme', query: { time: +new Date() } });
    },
    handleCurrentChanges(val) {
      this.getList(val);
    }
  }
};
</script>
<style lang="scss">
.priceAccount{
  color:red;
  font-size:14px;
  margin-right: 50px;
}
</style>
